<template>
  <div class="unit_payment">
    <div class="fanshionable_title">
      <span>钱包列表</span>
    </div>
    <div class="fanshionable_list">
      <el-form :inline="true" :model="formInline" class="demo-form-inline clearfix">
        <el-form-item>
          <el-button type="primary" @click="addfanshionable" size="mini" icon="el-icon-plus">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="fanshionabledata"
        border
        highlight-current-row
        :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column prop="walletName" label="钱包名称"></el-table-column>
        <el-table-column prop="walletNo" label="钱包号"></el-table-column>
        <el-table-column prop="aliId" label="支付宝商户id"></el-table-column>
        <el-table-column prop="aliToken" label="支付宝商户authtoken"></el-table-column>
        <el-table-column prop="wxId" label="微信商户id"></el-table-column>
        <el-table-column prop="subject" label="订单内容"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="addfanshionable(scope.row)">修改</el-button>
            <el-button
              type="text"
              size="mini"
              style="color:red"
              @click="deleOrUpdateHandle(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChangepage1"
          :current-page="currentPage1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordCount1"
        ></el-pagination>
      </div>-->
      <!-- 新增账户列表 -->
      <el-dialog
        width="600px"
        center
        :title="title"
        :before-close="addcloseDialog"
        :close-on-click-modal="false"
        :visible.sync="addFormVisible"
      >
        <!-- 
          @keyup.enter.native="addFormSubmit()"
        -->
        <el-form :model="addForm" :rules="adddataRule" ref="addForm" label-width="150px">
          <el-form-item label="钱包类型" prop="walletType">
            <el-col :span="15">
              <el-select
                v-model="addForm.walletType"
                placeholder="请选择"
                size="mini"
                clearable
                @change="setwalletNo"
              >
                <el-option
                  v-for="item in walletTypelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="钱包名称" prop="walletName">
            <el-col :span="15">
              <el-input v-model="addForm.walletName" placeholder="钱包名称" size="mini"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="钱包号" prop="walletNo">
            <el-col :span="15">
              <el-select v-model="addForm.walletNo" placeholder="请选择" size="mini" clearable>
                <el-option
                  v-for="item in walletNolist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="支付宝商户id" prop="aliId">
            <el-col :span="15">
              <el-input v-model="addForm.aliId" placeholder="支付宝商户id" size="mini"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="支付宝商户authToken" prop="aliToken">
            <el-col :span="15">
              <el-input v-model="addForm.aliToken" placeholder="支付宝商户authtoken" size="mini"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="微信商户id" prop="wxId">
            <el-col :span="15">
              <el-input v-model="addForm.wxId" placeholder="微信商户id" size="mini"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="订单内容" prop="subject">
            <el-col :span="15">
              <el-input v-model="addForm.subject" placeholder="订单内容" size="mini"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addvisible()">取消</el-button>
          <el-button type="primary" @click="addataFormSubmit()" v-if="title == '添加钱包'">确定</el-button>
          <el-button type="primary" @click="editataFormSubmit()" v-if="title == '修改钱包'">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let checknum = (rule, value, callback) => {
      let numReg = /^([1-9][0-9]*)$/
      if (!numReg.test(value)) {
        callback(new Error('请输入正确的钱包号！'))
      } else {
        callback()
      }
    }
    return {
      formInline: {},
      // 表格显示预与否
      dataListLoading: false,
      // 表格数据
      fanshionabledata: [],
      // 判断是添加还是修改
      title: '添加钱包',
      userGuid: '',
      // 添加钱包的窗口
      addFormVisible: false,
      addForm: {
        // 钱包类型
        walletType: 0,
        aliId: '',
        aliToken: '',
        walletName: '',
        walletNo: 1,
        wxId: '',
        unitGuid: '',
        subject: ''
      },
      walletNo: 1,
      adddataRule: {
        walletName: [
          { required: true, message: '请输入钱包名称', trigger: 'blur' }
        ],
        walletNo: [
          { required: true, message: '请输入钱包号', trigger: 'blur' },
          { required: true, validator: checknum, trigger: 'blur' }
        ],
        walletType: [
          { required: true, message: '请选择钱包类型', trigger: 'blur' }
        ],
        subject: [
          { required: true, message: '请输入订单内容', trigger: 'blur' }
        ]
      },
      walletNolist: [],
      walletTypelist: [
        { label: '卡钱包', value: 0 },
        { label: '平台钱包', value: 1 }
      ]
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    this.getcardcofing()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.fanshionable()
  },
  methods: {
    setwalletNo(val) {
      if (val == 1) {
        this.addForm.walletNo = 100
        this.walletNolist = []
        for (let i = 32; i < 101; i++) {
          this.walletNolist.push({ label: i, value: i })
        }
      } else {
        this.getcardcofing()
        this.addForm.walletNo = this.walletNo
      }
    },

    //获取卡配置参数，用以钱包号的选择
    getcardcofing() {
      this.$http({
        url: this.$http.adornUrl('/card/config'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.walletNolist = []
          let cardType = data.messageContent.cardType
          if (cardType == 4) {
            for (let i = 1; i < 16; i++) {
              this.walletNolist.push({ label: i, value: i })
            }
          } else if (cardType == 5) {
            for (let i = 1; i < 32; i++) {
              this.walletNolist.push({ label: i, value: i })
            }
          }
          // this.walletNolist.push({ label: 100, value: 100 });
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },

    // 列表数据获取
    fanshionable() {
      this.$http({
        url: this.$http.adornUrl('/unit/unit-wallet-info-list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.fanshionabledata = data.messageContent
        } else {
          this.$message({
            showClose: true,
            message: data.errorMessage,
            type: 'error'
          })
        }
      })
    },
    // 新增数据窗口
    async addfanshionable(row) {
      console.log(row.walletNo)
      await this.getcardcofing()
      this.walletNo = 1
      this.addFormVisible = true
      this.$nextTick(() => {
        this.$refs['addForm'].resetFields()
        if (row.walletNo) {
          this.title = '修改钱包'
          if (row.walletNo != 100 || row.walletNo != '100') {
            this.walletNo = row.walletNo
          }
          this.addForm = JSON.parse(JSON.stringify(row))
        }else{
          this.title = '添加钱包'
        }
      })
    },
    // 关闭数据窗口
    addcloseDialog(done) {
      this.title = '添加钱包'
      this.$refs['addForm'].resetFields()
      done()
    },
    // 新增数据弹窗取消
    addvisible() {
      this.addFormVisible = false
      this.title = '添加钱包'
      this.$refs['addForm'].resetFields()
    },
    // 新增数据弹窗提交
    addataFormSubmit() {
      // (!this.addForm.aliId && !this.addForm.aliId)
      if (this.addForm.aliId != '') {
        if (this.addForm.aliToken == '') {
          this.$message({
            message: '支付宝商户authToken不能为空',
            type: 'warning'
          })
          return false
        }
      } else {
        if (this.addForm.aliToken != '') {
          alert('支付宝商户id不能为空')
          return false
        }
      }
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          let info = JSON.parse(JSON.stringify(this.addForm))
          info.unitGuid = this.changeschoolid
          this.$http({
            url: this.$http.adornUrl('/unit/unit-wallet-info-add'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: info,
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.addFormVisible = false
              this.fanshionable()
            } else {
              this.$message({
                showClose: true,
                message: data.errorMessage,
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 列表数据修改
    editataFormSubmit() {
      if (this.addForm.aliId != '') {
        if (this.addForm.aliToken == '') {
          this.$message({
            message: '支付宝商户authToken不能为空',
            type: 'warning'
          })
          return false
        }
      } else {
        if (this.addForm.aliToken != '') {
          alert('支付宝商户id不能为空')
          return false
        }
      }
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          let info = JSON.parse(JSON.stringify(this.addForm))
          this.$http({
            url: this.$http.adornUrl('/unit/unit-wallet-info-update'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: info,
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.addFormVisible = false
              this.fanshionable()
            } else {
              this.$message({
                showClose: true,
                message: data.errorMessage,
                type: 'error'
              })
            }
          })
        }
      })
    },
    addOrUpdateHandle(row) {
      console.log(row)
      this.editForm.percentage = row.percentage
      this.editForm.settleType = row.settleType
      this.editForm.settleGuid = row.settleGuid
      this.editFormVisible = true
    },
    // 列表数据删除
    deleOrUpdateHandle(row) {
      console.log(row)
      // return
      this.$confirm('此操作将删除此钱包', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/unit/unit-wallet-info-delete'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                unitGuid: row.unitGuid,
                walletNo: row.walletNo
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.addFormVisible = false
              this.fanshionable()
            } else {
              this.$message({
                showClose: true,
                message: data.errorMessage,
                type: 'error'
              })
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.el-checkbox + .el-checkbox {
  margin-left: 0;
}
.unit_payment {
  padding: 10px;
  .clearfix:after {
    content: '.';
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: block;
  }
  .clearfix {
    zoom: 1;
  }
  .header_title {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e9f2;
    color: #909399;
  }
  .list {
    font-size: 16px;
    font-weight: bold;
    color: #909399;
    padding-top: 20px;
    .el-form-item {
      padding-left: 22px;
      // padding-top: 5px;
      height: 50px;
      line-height: 70px;
      margin-bottom: 0px;
      width: 100%;
    }
    .el-form-item:last-child {
      border-bottom: 0px solid #e5e9f2;
    }
  }
  .fanshionable_title {
    margin-top: 20px;
    height: 30px;
    color: #909399;
    border-bottom: 1px solid #e5e9f2;
  }
  .fanshionable_list {
    padding-top: 5px;
    .demo-form-inline {
      height: 40px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>